<template>
  <el-form
    :model="userForm"
    :rules="rules"
    ref="userForm"
    label-width="100px"
    class="demo-userForm"
  >
    <el-form-item label="用户名" prop="username">
      <el-input v-model="userForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="userForm.password" show-password></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model="userForm.age"></el-input>
    </el-form-item>

    <el-form-item label="生日" required>
      <el-col :span="11">
        <el-form-item prop="birthday">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            v-model="userForm.birthday"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-radio-group v-model="userForm.sex">
        <el-radio label="1">男</el-radio>
        <el-radio label="2">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('userForm')"
        >立即创建</el-button
      >
      <el-button @click="resetForm('userForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  mounted: function () {
    var app = this;
    //页面加载是默认调用的，
    //因为添加和修改共用一个页面，所以修改需要页面加载时回显
    let userId = this.$route.params.id;

    //判断修改和增加直接使用Id判断
    if (userId) {
      app.$httpRequest.get("user/getById/" + userId).then(function ({ data }) {
        //把解构出来的data取后端的key值(data) 然后赋值给 下面的userForm
        if (data.code == 0) {
          app.userForm = data.data;
          // 把性别加上空字符串让字符编码转为string类型
          app.userForm.sex = app.userForm.sex + "";
        }
      });
    }
  },

  data() {
    return {
      userForm: {
        id: "", //更新用户需要id
        username: "admin",
        password: "admin",
        birthday: "2021-12-12",
        sex: "1",
        age: "25",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          //   ,{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          //   ,{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        age: [
          { required: true, message: "年龄", trigger: "blur" },
          { min: 1, max: 3, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        birthday: [
          {
            type: "string",
            required: true,
            message: "请选择生日",
            trigger: "change",
          },
        ],
        sex: [{ required: true, message: "性别", trigger: "change" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      var app = this;

        //判断，如果携带id的话则是修改，如果不是就是添加
        var url="user/save";
        var btnmsg="添加";
        if(this.userForm.id){
            url="user/update";
          btnmsg="修改";
        }

      //异步发送请求
      this.$httpRequest
        .post(
          "user/save",
          //data接收的是个对象，userform返回的也是个对象，
          //所以可以直接接收
          this.userForm,{}
        )
        .then(function ({ data }) {
          if (data.code == 0) {
            app.$message({
              message: btnmsg+"成功",
              type: "success",
              showClose: true,
              duration: 1000,
              //跳转到显示列表
              onClose: () => {
                app.$router.push("/toUserList");
              },
            });
          } else {
            app.$message({
              message: "添加失败",
              type: "success",
              showClose: true,
              duration: 1500,
            });
          }
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
</style>
